<template>
  <div class="province">
    <my-header></my-header>
    <div style="height: 1800px; background-color: #f5f5f5">
      <!--  -->
      <div class="exhibition-page exhibition-page-bg">
        <div class="exhibition-banner">
          <img
            src="http://www.yhachina.com/images/exhibition/exhibition-banner4.jpg"
            alt=""
          />
        </div>
        <div class="exhibition-wrap w1080">
          <div class="exhibition-con clearfix">
            <div class="exhibition-l fl">
              <div class="introduction-details">
                <h2>新疆旅舍一览表</h2>
                <time></time>

                <!-- 地图 -->
                <div class="main" style="height: 420px">
                  <my-china></my-china>
                </div>
                <!--  -->

                <div class="hostel-image-tex">
                  <h2>您查询的是<span>新疆</span>的旅舍</h2>
                  <div class="hostel-image-tex-item clearfix">
                    <div class="hostel-image-tex-item-l fl">
                      <a href=""
                        ><img
                          src="http://111.230.248.218:1500/fileUpload/104927/home__120703102612.jpg"
                          alt=""
                      /></a>
                    </div>
                    <div class="hostel-image-tex-item-r fr">
                      <h3>新疆那拉提国际青年旅舍</h3>
                      <div class="advantage">
                        <span></span>
                      </div>
                      <div class="volsIntro">
                        <p>
                          那拉提国际青年旅舍坐落于那拉提旅游景区内（那拉提—蒙古语是“最先见到太阳的地方”）。旅舍地理位置优越，正处于景区观景台下方，后倚巩乃斯河谷天然胡杨林区，东近那拉提国家森林公园，西临天然赛马场，距离218国道仅五分钟的车程，交通十分便利。旅舍占地面积80亩，为庭院式布局，内有大型停车场。有住房39间，房间内有电视、独立卫生间、可淋浴。设施设备齐全。我们可以提供特色餐饮服务，在这里您能品尝到各种特色的哈萨克族美食；我们还提供车辆服务、旅游咨询服务等等。
                          在这里，您能体验真正的田园牧歌式的生活。旅舍青山环抱，草木葱茏，俯仰皆是景，欢迎您来赴和草原的约定！
                        </p>
                      </div>
                      <a href="" class="btn">查看详情</a>
                    </div>
                  </div>
                  <!--  -->
                  <div class="hostel-image-tex-item clearfix">
                    <div class="hostel-image-tex-item-l fl">
                      <a href=""
                        ><img
                          src="http://111.230.248.218:1500/fileUpload/104824/home__100818160100.jpg"
                          alt=""
                      /></a>
                    </div>
                    <div class="hostel-image-tex-item-r fr">
                      <h3><a href="">新疆喀纳斯AHA国际青年旅舍</a></h3>
                      <div class="advantage">
                        <span></span>
                      </div>
                      <div class="volsIntro">
                        <p>
                          喀纳斯AHA国际青年旅舍位于大喀纳斯景区著名的西北第一村白哈巴村,紧邻哈萨克斯坦,俄罗斯,蒙古国边境.著名的5号界碑就在旅舍对面.白哈巴村于2005年被中国国家地理杂志评为中国最美的六个乡村之一.旅舍紧邻“西北第一哨”——白哈巴边防站，地理位置极为优越，坐在旅舍的长廊上即可欣赏白哈巴醉人的夕阳美景。为了与周围的环境协调，旅舍全部采用原木建造，建筑形式为当地独有的哈萨克传统尖顶木屋，前庭带廊，可供客人坐于廊下休息、品茶、把酒临风，欣赏白哈巴得天独厚的自然美景，感受大自然带给心灵的抚慰，感悟别样的人生境界。
                        </p>
                      </div>
                      <a href="" class="btn">查看详情</a>
                    </div>
                  </div>
                  <!--  -->
                  <div class="hostel-image-tex-item clearfix">
                    <div class="hostel-image-tex-item-l fl">
                      <a href=""
                        ><img
                          src="http://111.230.248.218:1500/fileUpload/104949/home__140918005458.jpg"
                          alt=""
                      /></a>
                    </div>
                    <div class="hostel-image-tex-item-r fr">
                      <h3><a href="">新疆布尔津小白羊国际青年旅舍</a></h3>
                      <div class="advantage">
                        <span></span>
                      </div>
                      <div class="volsIntro">
                        <p>
                          新疆布尔津小白羊2007年5月开业，小羊军团大喀纳斯地区的驴友资讯中心，所有咨询都是免费的，小羊军团在阿勒泰地区救援中心，旅店位于布尔津著名的红顶小别墅区，欧式别墅，共四层，内设标准间、三人间、多人间床位，全部独立卫浴24小时热水，wife,免费的停车场等等，可以接待散客、旅行团队和自助游爱好者；在这里你可以了解到最新最全的大喀纳斯自助旅行信息，买到气罐、租到背包和睡袋，订到班车票等等……让你感受到家的温暖是我们一直追求的，让驴友们有宾至如归的感觉！喀纳斯小白羊2011年成立，位于喀纳斯景区内图瓦新村，是纯正图瓦木屋建筑，来到喀纳斯在安全的小白羊旅舍入住，体验一次木屋的感觉！
                        </p>
                      </div>
                      <a href="" class="btn">查看详情</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--  -->
            <div class="exhibition-r fr">
              <ul class="introduction-nav">
                <li class="active"><a href="">旅舍预订</a></li>
                <li>
                  <router-link to="/yuding" href="">旅舍查询</router-link>
                </li>
                <li>
                  <router-link to="/pandect" href="">旅舍一览表</router-link>
                </li>
              </ul>
              <div class="exhibition-r-block1">
                <router-link to="/yuding" href="" class="exhibition-r-block1-a"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    class="bi bi-house-door"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146ZM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5Z"
                    /></svg
                  >旅舍预订</router-link
                >
                <router-link to="/vip" href="" class="exhibition-r-block1-b"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    class="bi bi-card-heading"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
                    />
                    <path
                      d="M3 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0-5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1z"
                    /></svg
                  >会员卡</router-link
                >
                <router-link to="/" href="" class="exhibition-r-block1-c"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    class="bi bi-people"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"
                    /></svg
                  >旅舍加盟</router-link
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue"
import MyFooter from "@/components/MyFooter.vue"
import MyChina from "@/components/MyChina.vue"
export default {
  components: { MyHeader, MyFooter, MyChina },
}
</script>

<style lang="scss" scoped>
// //////
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.clearfix {
  display: block;
  clear: both;
}
.exhibition-page exhibition-page-bg {
  width: 1519px;
  //height: 1586px;
  background-color: #f5f5f5;
}
.exhibition-banner img {
  display: block;
  width: 100%;
}
.exhibition-wrap {
  color: #333;
  position: relative;
  top: -60px;
  z-index: 200;
}
.w1080 {
  width: 1080px;
  margin: 0 auto;
}
.exhibition-l {
  width: 810px;
  overflow: hidden;
}

.fl {
  display: inline;
  float: left;
}
.introduction-details {
  background-color: #fff;
  padding: 20px 50px 90px 50px;
}
.introduction-details h2 {
  font-size: 30px;
  margin-bottom: 10px;
}
.introduction-details time {
  color: #666666;
  display: block;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
}
// /////
.hostel-image-tex {
  width: 710px;
  height: 726px;
}
.hostel-image-tex h2 {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 15px;
  margin-bottom: 40px;
}
.hostel-image-tex h2 span {
  color: #87c524;
}
.hostel-image-tex-item {
  padding-bottom: 30px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 30px;
  font-family: arial;
  height: 180px;
}
.hostel-image-tex-item-l {
  width: 220px;
  height: 150px;
  overflow: hidden;
}

.fl {
  display: inline;
  float: left;
}
.hostel-image-tex-item-l img {
  display: block;
  width: 100%;
  margin: 0;
}

.introduction-details img {
  display: block;
  margin: 10px 5px;
  text-align: center;
  max-width: 95%;
}
.hostel-image-tex-item-r {
  width: 480px;
  margin-top: 15px;
}

.fr {
  display: inline;
  float: right;
}

.hostel-image-tex-item-r h3 {
  font-size: 18px;
  font-weight: bold;
}
.hostel-image-tex-item-r h3:hover {
  color: #4b8fcc;
}
.hostel-image-tex-item-r .volsIntro {
  text-indent: 0;
  line-height: 25px;
  margin-top: 10px;
  max-height: 90px;
  overflow: hidden;
}
.hostel-image-tex-item-r p {
  text-indent: 0;
  line-height: 26px;
  margin-top: 10px;
  max-height: 75px;
  overflow: hidden;
}
.introduction-details p {
  font-size: 16px;
  text-align: justify;
  margin-bottom: 14px;
}
.hostel-image-tex-item-r a.btn {
  color: #4b8fcc;
  display: inline-block;
  font-size: 14px;
  padding: 0.21429em 1.42857em;
  border-radius: 2em;
  text-align: center;
  border: 1px solid #4b8fcc;
  margin-top: 15px;
  line-height: 20px;
}
.hostel-image-tex-item-r h3 a {
  color: #333;
}
.hostel-image-tex-item-r h3 a:hover {
  color: #4b8fcc;
}
/////////
.exhibition-r {
  width: 240px;
}

.fr {
  display: inline;
  float: right;
}
.introduction-nav {
  margin-bottom: 30px;
}

ol,
ul {
  list-style: none;
}
.introduction-nav li.active {
  color: #fff;
  font-weight: bold;
  background-color: rgba(135, 197, 36, 0.9);
}

.introduction-nav li {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background-color: #fff;
}
.introduction-nav li.active a {
  color: #fff;
  background: none;
}

.introduction-nav li a {
  color: #333;
  border-bottom: 1px solid #eee;
  display: block;
  background: url(http://www.yhachina.com/images/exhibition/introduction-nav-icon.png)
    no-repeat right center;
}
.introduction-nav li:hover {
  background-color: rgba(135, 197, 36, 0.8);
}
.exhibition-r-block1 {
  margin-bottom: 20px;
}
.exhibition-r-block1 .exhibition-r-block1-a {
  background-color: #87c524;
}
.exhibition-r-block1 a {
  font-size: 18px;
  display: block;
  font-weight: bold;
  color: #fff;
  line-height: 80px;
  margin-bottom: 1px;
  background-image: url(http://www.yhachina.com/images/exhibition/exhibition-r-icon4.png);
  background-repeat: no-repeat;
  background-position: right 20px center;
  height: 80px;
}

.exhibition-wrap .explain,
.exhibition-l-item-c li,
.overseas-discount figure img,
.exhibition-r-block1 a {
  border-radius: 5px;
}
.exhibition-r-block1 a svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 10px 0 20px;
}
.exhibition-r-block1 .exhibition-r-block1-b {
  background-color: #f7941c;
}
.exhibition-r-block1 a {
  font-size: 18px;
  display: block;
  font-weight: bold;
  color: #fff;
  line-height: 80px;
  margin-bottom: 1px;
  background-image: url(http://www.yhachina.com/images/exhibition/exhibition-r-icon4.png);
  background-repeat: no-repeat;
  background-position: right 20px center;
  height: 80px;
}

.exhibition-wrap .explain,
.exhibition-l-item-c li,
.overseas-discount figure img,
.exhibition-r-block1 a {
  border-radius: 5px;
}
.exhibition-r-block1 b svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 10px 0 20px;
}
.exhibition-r-block1 .exhibition-r-block1-c {
  background-color: #4b8fcc;
}
.exhibition-r-block1 a {
  font-size: 18px;
  display: block;
  font-weight: bold;
  color: #fff;
  line-height: 80px;
  margin-bottom: 1px;
  background-image: url(http://www.yhachina.com/images/exhibition/exhibition-r-icon4.png);
  background-repeat: no-repeat;
  background-position: right 20px center;
  height: 80px;
}

.exhibition-wrap .explain,
.exhibition-l-item-c li,
.overseas-discount figure img,
.exhibition-r-block1 a {
  border-radius: 5px;
}
.exhibition-r-block1 c svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 10px 0 20px;
}
</style>
